<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="sn" label="SN" width="180" sortable>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="200" sortable>
      </el-table-column>
      <el-table-column prop="intro" label="简介" width="230" sortable>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" sortable>
        <template scope="scope">
          <span v-if="scope.row.status=='0'" style="color: red">禁用</span>
          <span v-if="scope.row.status=='1'" style="color: green">启用</span>
        </template>
      </el-table-column>
      <!--<el-table-column prop="intro" label="intro" min-width="180" sortable>
      </el-table-column>
      <el-table-column prop="path" label="路径" width="80" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="80" sortable>-->
        <!--<template scope="scope">
          <span v-if="scope.row.state=='0'" style="color: red">停用</span>
          <span v-if="scope.row.state=='1'" style="color: green">正常</span>
        </template>
      </el-table-column>-->
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="query.pageSize" :total="pageInfo.total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增或编辑界面
    :visible.sync="outerVisible" 新版本打开对话框
    v-model="dictionaryFormVisible" 老版本打开对话框
    -->
    <el-dialog title="新增或修改" :visible.sync="dictionaryFormVisible" :close-on-click-modal="false">
      <el-form :model="dictionary" label-width="80px" :rules="dictionaryFormRules" ref="dictionaryForm">
        <el-form-item label="SN" prop="sn">
          <el-input v-model="dictionary.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input type="text" v-model="dictionary.title" ></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="text" v-model="dictionary.intro"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="dictionary.status">
            <el-radio-button   label="1">启用</el-radio-button>
            <el-radio-button   label="0">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <!--<el-form-item label="年龄">
          <el-input type="text" v-model="dictionary.age"></el-input>
        </el-form-item>
        <el-form-item label="配置">
          <el-cascader v-model="dictionary.department"
                       :options="deptTree"
                       :props="{
							   checkStrictly: true,
							   label:'name',
							   value:'id'
							}"
                       clearable></el-cascader>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dictionaryFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="dictionaryLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  export default {
    data() {
      return {
        //关键词
        query: {
          currentPage: 1,
          pageSize: 10,
          keyword: ''
        },
        //分页数据
        pageInfo: {
          total: 0,
          rows: []
        },
        listLoading: false,
        sels: [],//列表选中列

        dictionaryFormVisible: false,//新增界面是否显示
        dictionaryLoading: false,
        dictionaryFormRules: {
          /*name: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],*/
          sn: [
            {required: true, message: '请输入SN', trigger: 'blur'}
          ]
        },
        //新增界面数据
        dictionary: {
          id: null,
          sn: '',
          title: '',
          intro: '',
          status: '',
        },
        //配置树
        deptTree:[],
        //回显path
        path1:'',
      }
    },
    methods: {
      search() {
        //重置当前页为第一页
        this.query.currentPage = 1;
        this.getDictionarysList();
      },
      handleCurrentChange(val) {
        this.query.currentPage = val;
        this.getDictionarysList();
      },
      //获取配置列表
      getDictionarysList() {
        this.listLoading = true; //发起请求之前显示加载条
        //发起请求获取数据
        this.$http.post("/dictionary", this.query)
            .then(result => {
              result = result.data; //{success,result:{}}
              if (result.success) {
                this.pageInfo = result.result;
              } else {
                this.$message({
                  message: '获取分页数据失败！' + result.message,
                  type: 'error'
                });
              }
              this.listLoading = false;
            })
            .catch(result => {
              this.$message({
                message: '系统错误！',
                type: 'error'
              });
            })
      },
      //删除
      handleDel: function (index, row) {
        let delId = row.id
        this.$confirm('确定要离我而去吗?', '~~~~(>_<)~~~~', {
          confirmButtonText: '狠心抛弃',
          cancelButtonText: '再爱我一次',
          type: 'warning',
        }).then(() => {
          this.$http.delete("/dictionary/" + delId)
              .then(result => {
                result = result.data;
                if (result.success) {
                  alert("删除成功");
                  this.getDictionarysList()
                } else {
                  alert("删除失败")
                }

              })
              .catch(result => {
                alert("系统异常")
              })
        })
        /*console.log(row)
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          let delId = row.id;
          //发起请求删除数据
          this.$http.delete("/dictionary", delId)
              .then(result => {
                result = result.data; //{success,result:{}}
                if (result.success) {
                  this.pageInfo = result.result;
                } else {
                  this.$message({
                    message: '获取分页数据失败！' + result.message,
                    type: 'error'
                  });
                }
                this.listLoading = false;
              })
              .catch(result => {
                this.$message({
                  message: '系统错误！',
                  type: 'error'
                });
              })
        })*/
        /* removedictionary(para).then((res) => {
            this.listloading = false;
            //nprogress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getdictionarys();
          });
        }).catch(() => {

        });*/
      },
      /*getPath(tempPath){
        //console.log(tempPath);
        this.$http.get("/dictionary/path/"+tempPath)
            .then(result=>{
              result = result.data
              if(result.success){
                this.pathjk.path2 = result.result;
                console.log(this.pathjk.path2,"=============")
                //console.log(this.path1,"lllllllllll")
                //console.log(this.dictionarys)
                return ;
              }
              alert("获取数据失败")
            })
            .catch(result=>{
              alert("系统异常")
            })
      },*/
      //显示编辑界面
      handleEdit: function (index, row) {
        this.dictionaryFormVisible = true;
        //console.log(row);
        //this.dictionary = Object.assign({}, row); //回显
        this.dictionary = row;
        let tempPath = this.dictionary.department.id;
        //通过department_id 获取department表的path
        this.getPath(tempPath);
        console.log(this.pathjk.path2,"[[[[[[[[")
        //获取部门树
        this.getDeptTree();
        //处理path，变成数组，做回显
        let path =this.pathjk.path2;
        //console.log(path,"llll")
        if (path){
          let path1 = path.split("/")
          let tempPath = [];
          for (let i=1;i<path1.length;i++){   //遍历取部门树数组
            tempPath.push(parseInt(path1[i]));
          }
          //console.log(tempPath)
          this.dictionary.department=tempPath;
        }
        this.getDictionarysList()

      },
      /*//获取全部配置信息
      getDictionarys(){
        this.$http.get("/dictionary")
            .then(result=>{
              result = result.data
              if(result.success){
                this.dictionarys = result.result;
                //console.log(this.dictionarys)
                return ;
              }
              alert("获取数据失败")
            })
            .catch(result=>{
              alert("系统异常")
            })
      },*/
      /*getDeptTree(){
        this.$http.get("/department/deptTree")
            .then(result=>{
              result = result.data
              if(result.success){
                this.deptTree = result.result;
                //console.log(this.deptTree,"klklklk");
                return ;
              }
              alert("获取数据失败")
            })
            .catch(result=>{
              alert("系统异常")
            })
      },*/
      //显示新增界面
      handleAdd: function () {
        this.dictionaryFormVisible = true;
        this.dictionary = {
          id: null,
          sn: '',
          title: '',
          intro: '',
          status: null,
        }
      },
      //编辑
      save: function () {
        this.$refs.dictionaryForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.dictionaryLoading = true;
              let para = Object.assign({}, this.dictionary);
              //console.log(para,"===============")
              this.$http.put("/dictionary",para).then((res) => {
                res = res.data;
                if (res.success){
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });

                  this.dictionaryFormVisible = false; //关闭对话框

                  this.$refs['dictionaryForm'].resetFields(); //重置表单

                  this.getDictionarysList(); //重新加载数据
                }else{
                  this.$message({
                    message: '保存失败,'+res.message,
                    type: 'error'
                  });
                }

                this.dictionaryLoading = false; //关闭加载条
              });
            });
          }
        });
      },
      //列表选中行
      selsChange: function (sels) {
        this.sels = sels;
      },
      //批量删除
      batchRemove: function () {
       // var ids = this.sels.map(item => item.id).toString();
        /*判断是否为空*/
        if (this.sels == null || this.sels.length <1){
          this.$confirm("没有选中数据，请重新选择",{
            cancelButtonText:"确定",
            type:'warning'
          })
          return;
        };
        this.$confirm('确定要删除这些数据吗?', '~~~~(>_<)~~~~', {
          confirmButtonText: '狠心抛弃',
          cancelButtonText: '再爱我一次',
          type: 'warning'
        }).then(()=>{
          let ids = this.sels.map(dictionary=>dictionary.id)
          console.log(ids,"klkllk");
          this.$http.patch("/dictionary",ids)
              .then(result=>{
                result = result.data
                if(result.success){
                  alert("删除成功");
                  this.getDictionarysList();
                  return ;
                }
                alert("删除失败")
              })
              .catch(result=>{
                alert("系统异常")
              })
        })
      }

    },
    mounted() {
      this.getDictionarysList();
    }
  }

</script>

<style scoped>

</style>
